@import "media-queries";
@import "common";

$min-main-view-width: 600;
$side-bar-width: ('small': 80, 'large': 90);
$header-height: ('small': 55, 'large': 60);

:export {
  MIN_MAIN_VIEW_WIDTH: $min-main-view-width;
  SIDE_BAR_WIDTH_SMALL: #{map-get($side-bar-width, 'small')};
  SIDE_BAR_WIDTH_LARGE: #{map-get($side-bar-width, 'large')};
  HEADER_HEIGHT_SMALL: #{map-get($header-height, 'small')};
  HEADER_HEIGHT_LARGE: #{map-get($header-height, 'large')};
}

@mixin monitor-item-common-properties($text-width: calc(100% - 17px)) {
  display: flex;
  list-style-type: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  border-top: 1px solid #333333;
  padding: 10px;
  cursor: default;

  .icon {
    position: relative;
    height: 20px;
    width: 20px;
    padding-right: 5px;

    @include small-screen {
      height: 15px;
      width: 15px;
    }
  }

  .text {
    position: relative;
    width: $text-width;
    padding-left: 5px;

    line-height: 150%;
    font-size: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;

    @include small-screen {
      font-size: 12px;
    }
  }

  .time {
    position: absolute;
    right: 5px;

    font-size: 12px;
  }

  .alert {
    color: #D7466F;
  }

  .warn {
    color: #A3842D;
  }
}

body {
  margin: 0px;
  overflow: hidden;

  background-color: #14171A !important;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #FFFFFF;

  * {
    font-size: 16px;

    @include small-screen {
      font-size: 14px;
    }
  }
}

.no-data {
  padding: 20px;
  color: #B43131;
}


/* Adjust the scrollbar style. */

::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  opacity: 0.3;
  background-color: #FFFFFF;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555555;
}

::-webkit-scrollbar-thumb {
  opacity: 0.8;
  background-color: #30A5FF;
}

::-webkit-scrollbar-thumb:active {
  background-color: #30A5FF;
}

.header {
  display: flex;
  align-items: center;

  z-index: 100;
  position: relative;
  top: 0;
  left: 0;
  height: map-get($header-height, 'large') + 0px;

  background: #000000;
  color: #ffffff;
  text-align: left;

  @include small-screen {
    height: map-get($header-height, 'small') + 0px;
  }

  /* The Apollo logo on the header. */
  .apollo-logo {
    flex: 0 0 auto;

    top: 40px;
    left: 40px;
    height: 40px;
    width: 121px;
    margin: 10px auto 5px 18px;

    @include small-screen {
      top: 15px;
      left: 25px;
      height: 25px;
      width: 80px;
      margin-top: 5px;
    }
  }

  .header-item {
    flex: 0 0 auto;

    position: relative;
    margin: 5px;
    border: 1px solid #383838;
  }

  .selector {
    &.scenario-set-selector {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    select {
      display: block;

      border: none;
      padding: 0.5em 3em 0.5em 0.5em;

      background: #000000;
      color: #ffffff;
      outline: none;
      cursor: pointer;

      /* remove default arrow */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .arrow {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 30px;
      height: 100%;
      border-left: 1px solid #383838;

      background: #181818;
      pointer-events: none;
    }

    .arrow:before {
      position: absolute;
      top: 55%;
      right: 7px;
      margin-top: -5px;
      border-top: 8px solid #666666;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;

      content: '';
      pointer-events: none;
    }
  }

  .header-button {
    min-width: 125px;
    padding: 0.5em 0em;

    background: #181818;
    color: #ffffff;
    text-align: center;
    cursor: pointer;

    @include small-screen {
      min-width: 110px;
    }
  }

  .header-button-active {
    color: #30A5FF;
  }
}

.pane-container {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);

  @include small-screen {
    height: calc(100% - 55px);
  }

  .left-pane {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;

    position: absolute;
    bottom: 0px;
    top: 0px;
    width: 100%;

    .dreamview-body {
      display: flex;
      flex-flow: column nowrap;
      flex: 1 1 auto;
      overflow: hidden;
      background-color: #1D2226;

      .main-view {
        flex: 0 0 auto;
        position: relative;
        min-width: $min-main-view-width + 0px;

        #camera-image {
          width: 100%;
        }
      }
    }
  }

  .right-pane {
    position: absolute;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;

    ::-webkit-scrollbar {
      width: 6px;
    }

    .react-tabs {
      @extend .custom-react-tab;
    }
  }

  .SplitPane {
    .Resizer {
      background: #000000;
      opacity: 0.2;
      z-index: 1;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -moz-background-clip: padding;
      -webkit-background-clip: padding;
      background-clip: padding-box;
    }

    .Resizer:hover {
      -webkit-transition: all 2s ease;
      transition: all 2s ease;
    }

    .Resizer.vertical {
      width: 11px;
      margin: 0 -5px;
      border-left: 5px solid rgba(255, 255, 255, 0);
      border-right: 5px solid rgba(255, 255, 255, 0);
      cursor: col-resize;
    }

    .Resizer.vertical:hover {
      border-left: 5px solid rgba(0, 0, 0, 0.5);
      border-right: 5px solid rgba(0, 0, 0, 0.5);
    }

    .Resizer.disabled {
      cursor: auto;
    }

    .Resizer.disabled:hover {
      border-color: transparent;
    }
  }
}


.offlineview {
  display: flex;
  flex-flow: column nowrap;

  position: absolute;
  width: 100%;
  height: 100%;

  .main-view {
    flex: 0 0 auto;
    position: relative;
  }
}


/* This is the styles for the main canvas of the dreamview container.
   It is applied to the major <div> of <Dreamview>. */

.dreamview-canvas {
  z-index: 1;
  position: absolute;

  .geolocation {
    z-index: 10;
    position: absolute;
    bottom: 10px;
    right: 10px;

    color: white;
  }

  .default-routing-input {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1D2226;
    padding: 5px;

    .name-label {
      padding: 10px 0 10px 10px;
    }

    .start-cycle-checkbox {
      display: inline-block;
      padding-left: 20px;
    }

    .name-input {
      margin: 10px;
      min-height: 20px;
    }

    .default-routing-input-btn {
      display: flex;
      justify-content: center;
      align-items: center;

      .input-button {
        min-width: 100px;
        display: inline-block;
        margin: 0 5px 5px 5px;
        padding: 10px 10px;
        border: 1px solid #383838;
        background: #1D2226;
        color: #FFFFFF;
        vertical-align: middle;
        text-align: center;

        @include small-screen {
          min-width: 125px;
        }
      }

      .submit-button {
        background: #000000;
      }

      .input-button:active {
        background: #383838;
      }
    }
  }
}

.hidden {
  display: none;
}

.tools {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  flex: 1 1 auto;

  overflow: hidden;
  border-top: 1px solid #000000;
  background: #000000;

  .card {
    flex: 1 1 auto;

    margin-right: 1px;
    padding: 15px 10px 25px 20px;
    background: #1D2226;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    color: #FFFFFF;

    @include small-screen {
      padding: 12px 5px 15px 12px;
    }

    .card-header {
      width: 100%;
      padding-bottom: 15px;
      display: flex;
      justify-content: space-between;

      span {
        display: inline-block;
        width: 200px;
        height: 100%;
        padding: 10px 10px 10px 0px;
        text-align: center;

        font-size: 18px;

        @include small-screen {
          font-size: 16px;
        }

        &:not(.active) {
          cursor: pointer;
        }

        &.active {
          border-bottom: 1px solid #999999;
        }
      }

      .card-header-btn {
        border: none;
        border-bottom: 1px solid #999999;
        padding: 10px 0px 10px 0px;
        margin-right: 10px;
        background: #1D2226;
        color: #FFFFFF;
        text-align: left;
        white-space: nowrap;

        font-size: 18px;

        @include small-screen {
          font-size: 16px;
        }
      }
    }

    .card-content-row {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;

      overflow-x: hidden;
      overflow-y: auto;
      height: 85%;

      .cycle-input {
        display: flex;
        margin-left: auto;
        justify-content: flex-start;
        justify-content: space-between;

        padding: 0px;
        border: none;
        background: #1D2226;

        .cycle-input-item {
          margin: 10px;
        }
      }
    }

    .card-content-column {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;

      overflow-x: hidden;
      overflow-y: auto;
      height: 89%;
    }
  }

  .tool-view-menu {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;

    flex: 2 1 auto;

    z-index: 10 !important;
    margin-left: 1px;
    overflow-y: hidden;
    overflow-x: auto;
    background: #000000;
    color: #FFFFFF;
    text-align: left;
    white-space: nowrap;

    .summary {
      line-height: 50px;

      @include small-screen {
        line-height: 25px;
      }

      img {
        position: relative;
        width: 30px;
        height: 30px;
        transform: translate(-30%, 25%);

        @include small-screen {
          width: 20px;
          height: 20px;
          transform: translate(-50%, 10%);
        }
      }

      span {
        padding-left: 10px;
      }
    }

    /*  Radio button */
    input[type="radio"] {
      display: none;
    }

    .radio-selector-label {
      display: inline-block;
      position: relative;
      transform: translate(10%, 30%);
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      width: 25px;
      height: 25px;
      margin-right: 6px;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #A0A0A0;
      box-shadow: inset 1px 0 #A0A0A0;
      border: 7px solid #3F4548;
    }

    input[type="radio"]:checked + .radio-selector-label {
      border: 7px solid #0E3D62;
      background-color: #30A5FF;
    }
  }

  .console {
    z-index: 10;
    position: relative;
    min-width: 230px;
    margin: 0px;
    border: none;
    padding: 0px;

    overflow: hidden;

    .monitor-item {
      color: #fff;
      @include monitor-item-common-properties(calc(100% - 82px));
    }
  }

  .default-routing-button {
    min-width: 360px;

    @include small-screen {
      min-width: 320px;
    }
  }
}

.side-bar {
  display: flex;
  flex-direction: column;

  flex: 0 0 auto;

  z-index: 100;
  background: #1D2226;
  border-right: 1px solid #000000;
  overflow-y: auto;
  overflow-x: hidden;

  .main-panel {
    margin-bottom: auto;
  }

  .button {
    display: block;
    width: map-get($side-bar-width, 'large') + 0px;
    border: none;
    padding: 20px 10px;

    text-align: center;
    background: #1D2226;
    color: #FFFFFF;
    opacity: 0.6;
    cursor: pointer;

    @include small-screen {
      width: map-get($side-bar-width, 'small') + 0px;
      padding-top: 10px;
    }

    .icon {
      width: 40px;
      height: 40px;
      margin: auto;

      @include small-screen {
        width: 30px;
        height: 30px;
      }
    }

    .label {
      padding-top: 10px;

      @include small-screen {
        padding-top: 4px;
      }
    }
  }

  .button:first-child {
    padding-top: 25px;

    @include small-screen {
      padding-top: 10px;
    }
  }

  .button:disabled {
    color: #414141;
    cursor: not-allowed;

    .icon {
      opacity: 0.2;
    }
  }

  .button-active {
    background: #2A3238;
    opacity: 1;
    color: #FFFFFF;
  }

  .sub-button {
    display: block;
    width: 90px;
    height: 80px;
    border: none;
    padding: 10px;

    text-align: center;
    background: #3E4041;
    color: #999999;
    cursor: pointer;

    @include small-screen {
      width: 80px;
      height: 60px;
    }
  }

  .sub-button:not(:last-child) {
    border-bottom: 1px solid #1D2226;
  }

  .sub-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }

  .sub-button-active {
    background: #30A5FF;
    color: #FFFFFF;
  }
}

.status-bar {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  .rss {
    flex: 1 1 auto;
    position: absolute;
    width: 240px;
    height: 270px;
    top: 10px;
    right: 250px;
    background: rgba(0, 0, 0, 0.8);

    .rss-header {
      width: 100%;
      text-align: center;
      font-size: 15px;

      div {
        padding: 5px 0 5px 0;
      }
    }

    .rss-content-column {
      flex-flow: column nowrap;
      overflow-x: hidden;
      overflow-y: auto;
      height: 89%;
    }

    .rss-console {
      z-index: 10;
      position: relative;
      min-width: 230px;
      margin: 0px;
      border: none;
      padding: 0px;
      overflow: hidden;
      white-space: pre-wrap;

      .monitor-item {
        color: #fff;
        @include monitor-item-common-properties(calc(100% - 80px));
      }
    }
  }

  .battery-and-gears {
    position: absolute;
    width: 224px;
    height: 35px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);

    font-size: 14px;

    .left-div {
      position: absolute;
      width: 116px;
      height: 35px;
    }

    .right-div {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 105px;
      height: 35px;
    }

    .text {
      position: absolute;
      top: 50%;
      left: 50%;

      float: right;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 14px;
      color: #FFFFFF;
    }
  }

  .electricity-status {
    top: 287px;
    background: rgba(0, 0, 0, 0.5);
  }

  .auto-meter {
    position: absolute;
    width: 224px;
    height: 112px;
    top: 10px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);

    .speed-read {
      position: absolute;
      top: 27px;
      left: 15px;

      font-family: Arial;
      font-weight: lighter;
      font-size: 35px;
      color: #ffffff;

      cursor: pointer;
    }

    .speed-unit {
      position: absolute;
      top: 66px;
      left: 17px;

      color: #ffffff;
      font-size: 15px;

      cursor: pointer;
    }

    .brake-panel {
      position: absolute;
      top: 21px;
      right: 2px;
    }

    .throttle-panel {
      position: absolute;
      top: 61px;
      right: 2px;
    }

    .meter-container {
      .meter-label {
        font-size: 13px;
        color: #ffffff;

        .meter-value {
          position: absolute;
          top: 2px;
          right: 10px;

          font-size: 10px;
        }
      }

      .meter-head {
        display: inline-block;
        position: absolute;
        margin: 5px 0px 0px 0px;
        border-width: 4px;
        border-style: solid;
      }

      .meter-background {
        position: relative;
        display: block;
        height: 2px;
        width: 120px;
        margin: 8px;

        span {
          position: relative;
          overflow: hidden;
          display: block;
          height: 100%;
        }
      }
    }
  }

  .wheel-panel {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    position: absolute;
    top: 128px;
    right: 20px;
    width: 187px;
    height: 92px;
    padding: 10px 22px 10px 15px;
    background: rgba(0, 0, 0, 0.8);

    .steerangle-read {
      font-family: Arial;
      font-weight: lighter;
      font-size: 35px;
      color: #ffffff;
    }

    .steerangle-unit {
      padding: 20px 10px 0px 3px;
      color: #ffffff;
      font-size: 13px;
    }

    .left-arrow {
      position: absolute;
      top: 45px;
      right: 115px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 12px 15px 12px 0px;
      border-color: transparent #30435e transparent transparent;
    }

    .right-arrow {
      position: absolute;
      top: 45px;
      right: 15px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 12px 0px 12px 15px;
      border-color: transparent transparent transparent #30435e;
    }

    @mixin blink($name, $property) {
      animation: $name 0.5s linear infinite alternate;
      animation-play-state: running;

      @keyframes #{$name} {
        from {
          #{$property}: #006AFF;
        }
        to {
          #{$property}: #30435E;
        }
      }
    }

    .blink-left {
      @include blink(left, 'border-right-color');
    }

    .blink-right {
      @include blink(right, 'border-left-color');
    }

    .wheel {
      position: absolute;
      top: 15px;
      right: 33px;
    }

    .wheel-background {
      stroke-width: 3px;
      stroke: #006AFF;
    }

    .wheel-arm {
      stroke-width: 3px;
      stroke: #006AFF;
      fill: #006AFF;
    }
  }

  .traffic-light-and-driving-mode {
    position: absolute;
    top: 246px;
    right: 20px;
    width: 224px;
    height: 35px;

    font-size: 14px;

    .traffic-light {
      position: absolute;
      width: 116px;
      height: 35px;
      background: rgba(0, 0, 0, 0.8);

      .symbol {
        position: relative;
        top: 4px;
        left: 4px;
        width: 28px;
        height: 28px;
      }

      .text {
        position: absolute;
        top: 10px;
        right: 8px;

        font-size: 14px;
        color: #FFFFFF;
      }
    }

    .driving-mode {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 105px;
      height: 35px;

      .text {
        position: absolute;
        top: 50%;
        left: 50%;

        float: right;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 14px;
      }
    }

    .auto-mode {
      background: linear-gradient(to right, rgba(17, 30, 48, 0.8), rgba(7, 42, 94, 0.8));
      border-right: 1px solid #006AFF;
      color: #006AFF;
    }

    .manual-mode {
      background: linear-gradient(to right, rgba(30, 17, 17, 0.8), rgba(71, 36, 36, 0.8));
      color: #B43131;
      border-right: 1px solid #B43131;
    }
  }


  .notification-warn {
    position: absolute;
    top: 10px;
    right: 260px;
    width: 260px;
    @include monitor-item-common-properties();

    border: 1px solid #A3842D;
    background-color: rgba(52, 39, 5, 0.3);
  }

  .notification-alert {
    position: absolute;
    top: 10px;
    right: 260px;
    width: 260px;
    @include monitor-item-common-properties();

    border: 1px solid #D7466F;
    background-color: rgba(74, 5, 24, 0.3);
  }
}

.tasks {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  flex: 1 1 auto;

  z-index: 10;
  overflow-x: auto;
  overflow-y: hidden;


  .command-group {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;

    flex: 1 1 0;

    min-height: 45px;
    min-width: 130px;

    .name {
      width: 40px;
      padding: 15px;
    }
  }

  .start-auto-command {
    flex: 2 2 0;

    .start-auto-button {
      max-height: unset;
    }
  }

  .others {
    min-width: 245px;

    @include small-screen {
      min-width: 225px;
    }

    .others-checkbox {
      margin-left: 10px;
    }
  }

  .delay {
    min-width: 260px;
    line-height: 26px;

    @include small-screen {
      min-width: 230px;
    }

    .delay-item {
      position: relative;
      margin: 0px 10px;

      .name {
        display: inline-block;

        min-width: 140px;
        color: #1C9063;
      }

      .value {
        display: inline-block;

        position: absolute;
        right: 0px;
        min-width: 70px;
        text-align: right;
      }

      .warning {
        color: rgb(180, 49, 49);
      }
    }
  }

  .camera {
    min-width: 265px;
  }

  .disabled {
    cursor: not-allowed;
  }
}

.module-controller {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  flex: 1 1 auto;

  z-index: 10;
  overflow: hidden;

  .controller {
    min-width: 180px;
  }

  .modules-container {
    flex-flow: column wrap;
  }

  .status-display {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    min-width: 250px;
    padding: 5px 20px 5px 5px;

    &:hover {
      background: #2A3238;
    }

    .name {
      padding: 10px;
      min-width: 80px;
    }

    .status {
      position: relative;
      width: 130px;
      padding: 10px;

      background: #000000;
      white-space: nowrap;

      .status-icon {
        position: absolute;
        right: 10px;
        width: 15px;
        height: 15px;

        background-color: #B43131;
      }
    }
  }
}

.data-profile {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  flex: 1;

  z-index: 10;

  &-card {
    color: #fff;
    min-width: 458px;
    width: 458px;
    max-width: 458px;
    margin-right: 1px;
    padding: 15px 10px 25px 20px;
    background: #1D2226;

    // profile select 选中组
    .data-profile-card_select_group {
      display: flex;
    }

    &_select {
      position: relative;
      padding-top: 10px;

      select {
        position: relative;
        z-index: 200;
        background: transparent;
        border: none;
        appearance: none;
        padding-right: 32px;
        text-align: right;
        width: 90px;
      }

      &:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        border-style: solid;
        border-width: 10px 5px 0 5px;
        border-color: #ffffff transparent transparent transparent;
      }
    }

    @include small-screen {
      padding: 12px 5px 15px 12px;
    }

    .card-header {
      width: 100%;
      padding-bottom: 15px;
      display: flex;
      justify-content: space-between;

      span {
        width: 200px;
        border-bottom: 1px solid #999999;
        padding: 10px 10px 10px 0px;

        font-size: 18px;

        @include small-screen {
          font-size: 16px;
        }
      }

      .card-header-btn {
        border: none;
        border-bottom: 1px solid #999999;
        padding: 10px 0px 10px 0px;
        margin-right: 10px;
        background: #1D2226;
        color: #FFFFFF;
        text-align: left;
        white-space: nowrap;

        font-size: 18px;

        @include small-screen {
          font-size: 16px;
        }
      }
    }
  }

  // Left scene set display bar
  &_scenario_set_column {
    height: 85%;
    overflow-y: auto;
  }

  &_profile_tabs_column {
    height: 100%;
    overflow-y: auto;
  }


  &_no_certificate {
    display: flex;
    flex-direction: column;
    align-items: center;

    &__icons {
      width: 48px;
    }

    h6 {
      margin-bottom: 12px;
    }

    p {
      text-align: center;
    }

    button {
      padding: 6px 10px;
    }
  }

  &_invalid_certificate {
    width: 100%;
    height: 80px;
    padding: 19px 24px;
    background: rgba(255, 241, 229, 0.1);
    display: flex;

    &__icons {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }

    &__content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      font-family: PingFangSC-Regular, serif;
      font-size: 14px;

      line-height: 14px;
      font-weight: 400;

      h6 {
        color: #FF8B33;
      }

      p {
        cursor: pointer;
        font-size: 12px;
        color: #2FA5FF;
        line-height: 12px;
        font-weight: 400;

        img {
          margin-left: 6px;
          vertical-align: center;
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  //Scene set list container
  .scenario-set-list {
    flex: 1;

    &-item {
      padding-right: 6px;
      width: 100%;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_name {
        width: 144px;
        max-width: 144px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &_status {
        &_icon {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }

        &_updating {
          @keyframes rotateIcon {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

          animation: rotateIcon 1s ease-in-out infinite;
        }

        &_downloaded {
          color: #00B48F;
        }

        &_fail {
          color: #F63E40;
        }
      }

      &_button {
        width: 104px;
        height: 36px;
        background: #303438;
        border-radius: 8px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;

        &_refreshing {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-left: 4px;

          img {
            width: 100%;
            height: 100%;
            animation: rotateIcon 1s ease-in-out infinite;
          }
        }

        // 每秒转两圈
        @keyframes rotateIcon {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }


        &:hover {
          background: #616467;
        }

        &.scenario-set-list-item_button_placehold {
          background: transparent;
          cursor: default;

          &:hover {
            background: transparent;
          }
        }
      }
    }
  }

  //local Scene set list container
  .local-scenario-set-list {
    .ant-radio-group {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .ant-radio-wrapper {
        color: #fff;
        height: 44px;
        align-items: center;
        justify-content: center;
      }
    }

    &-item {
      height: 44px;
      margin-right: 37px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: #393E43;
        border-radius: 6px;
      }

      &:not(.local-scenario-set-list-item_selected):hover {
        .local-scenario-set-list-item_delete {
          &_icon {
            display: block;
          }
        }
      }

      &_delete {
        width: 16px;
        height: 16px;

        &_icon {
          cursor: pointer;
          width: 100%;
          height: 100%;
          display: none;
        }

      }
    }
  }

  //local record list container
  .local-record-list {
    display: flex;

    &-item {
      height: 44px;
      margin-right: 37px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: #393E43;
        border-radius: 6px;

        .local-record-list-item_ctrl {
          &_icon {
            display: block;
          }
        }
      }

      &:not(.local-record-list-item_selected):hover {
        .local-record-list-item_delete {
          padding-left: 4px;

          &_icon {
            display: block;
          }
        }
      }

      &_delete {
        width: 16px;
        height: 16px;

        &_icon {
          cursor: pointer;
          width: 100%;
          height: 100%;
          display: none;
        }
      }

      &_ctrl {
        width: 14px;
        padding-left: 6px;

        &_icon {
          cursor: pointer;
          width: 100%;
          display: none;
        }
      }

      &_download {
        width: 24px;
        padding-left: 6px;

        &_icon {
          cursor: pointer;
          width: 100%;
        }
      }
    }
  }

  //remote vehicle list container
  .remote-vehicle-list {
    padding: 0 24px 40px;

    &_empty {
      padding-top: 100px;
    }
    .remote-vehicle-list-item-container {
      &:hover {
        background: #393E43;
        border-radius: 6px;
      }
    }

    .vehicle-list-item {
      display: flex;
      align-items: center;
      color: white;
      margin-bottom: 4px;
      padding: 4px;

      &_name {
        margin-right: 10px;
        min-width: 165px;
      }

      &_vin {
        margin-right: 10px;
      }

      &_status {
        padding: 5px 10px;
        background-color: #000;
        margin: 0 20px;
      }

      &_btns {
        &_btn {
          padding: 10px 20px;
          margin: 3px;
          border: 0;
          min-width: 75px;
          min-height: 40px;
          max-height: 60px;
          color: #999999;
          border-bottom: 2px solid #1C9063;
          outline: none;
          cursor: pointer;
          background: #000000;
          &:hover {
            background: linear-gradient(#000000, #111F1D);
          }
        }
      }
    }
  }
}

.route-editing-bar {
  z-index: 10;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  min-height: 90px;

  border-bottom: 3px solid #000000;
  padding-left: 10px;
  background: #1D2226;

  @include small-screen {
    min-height: 60px;
  }

  .editing-panel {
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    white-space: nowrap;

    .button {
      height: 90px;
      border: none;
      padding: 10px 15px;

      background: #1D2226;
      outline: none;
      color: #999999;

      @include small-screen {
        height: 60px;
        padding: 5px 10px;
      }

      img {
        display: block;
        top: 23px;
        margin: 15px auto;

        @include small-screen {
          top: 13px;
          margin: 7px auto;
        }
      }

      span {
        font-family: PingFangSC-Light;
        color: #D8D8D8;
        text-align: center;
      }
    }

    .button:hover {
      background: #2A3238;
    }

    .active {
      color: #FFFFFF;
      background: #2A3238;
    }

    .editing-tip {
      height: 90px;
      width: 90px;
      margin-left: auto;
      border: none;

      color: #D8D8D8;

      @include small-screen {
        height: 60px;
        width: 60px;
      }

      .tip-popup {
        position: absolute;
        top: 120%;
        right: 15px;
        width: 400px;
        border-radius: 3px;
        padding: 20px;

        background-color: #FFFFFF;
        color: #555555;
        text-align: left;
        white-space: pre-wrap;

        @include small-screen {
          right: 5px;
        }

        .title {
          padding-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
        }

        table {
          border-collapse: collapse;

          th, td {
            border: 1px solid #D9D9D9;
            padding: 10px;
          }

          th {
            text-align: center;
          }
        }
      }
    }
  }
}

.data-recorder {
  z-index: 10;

  padding-left: 5px;

  .react-tabs {
    @extend .custom-react-tab;

    height: 100%;

    &__tab-panel {
      box-sizing: border-box;
      height: 100%;
      padding: 10px 0px 5px 0px;

      @include small-screen {
        padding: 5px 0px 0px 0px;
      }
    }

    ul.react-tabs__tab-list {
      width: unset;
    }

    li.react-tabs__tab {
      border-bottom: 1px solid #999999;
      padding: 10px 35px;

      &--selected {
        border-bottom: 1px solid #FFFFFF;
      }
    }
  }

  table {
    width: 100%;
    height: 100%;
    min-width: 860px;

    @include small-screen {
      min-width: 550px;
    }

    tr, td {
      border: 2px solid #1D2226;
    }

    td:first-child {
      width: 110px;
      border: none;
      padding-left: 15px;

      box-sizing: border-box;
      white-space: nowrap;

      @include small-screen {
        width: 75px;
      }
    }

    .drive-event-row {
      .event-time {
        position: relative;
        padding: 10px 5px 10px 10px;
        background: #101315;
        white-space: nowrap;

        .timestamp-button {
          position: relative;
          top: 0px;
          right: 0px;
          padding: 5px 20px;
          border: 5px solid #101315;
          margin-left: 10px;

          background: #006AFF;
          color: #FFFFFF;
        }

        .timestamp-button:hover {
          background: #49a9ee;
        }
      }
    }

    .drive-event-msg-row {
      width: 70%;
      height: 70%;

      textarea, input {
        height: 100%;
        width: 100%;
        max-width: 500px;
        color: #FFFFFF;

        border: 1px solid #383838;
        background: #101315;

        resize: none;
      }

      input {
        padding: 7px;
      }
    }

    %drive-event-button {
      min-width: 135px;
      margin-right: 5px;
      padding: 10px 35px;
      border: 1px solid #383838;

      background: #1D2226;
      color: #FFFFFF;

      cursor: pointer;

      @include small-screen {
        min-width: 125px;
      }
    }

    .drive-event-type-button {
      @extend %drive-event-button;
      background: #181818;
      padding: 10px 25px;
    }

    .drive-event-type-button-active {
      color: #30A5FF;
    }

    .cancel-button {
      @extend %drive-event-button;
    }

    .submit-button {
      @extend %drive-event-button;
      background: #000000;
    }

    .submit-button:active {
      @extend %drive-event-button;
      background: #383838;
    }

    .multiple-items {
      display: flex;
      justify-content: flex-start;
      justify-content: space-between;

      padding: 0px;
      border: none;
      background: #1D2226;
    }
  }
}

.loader {
  flex: 0 0 auto;

  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000C17;

  .img-container {
    position: relative;
    top: 55%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -50%);

    img {
      width: 100%;
      height: auto;
    }

    .status-message {
      margin-top: 10px;
      font-size: 18px;
      /* fallback */
      font-size: 1.7vw;
      color: #FFFFFF;
      text-align: center;

      animation-name: flash;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-play-state: running;

      @keyframes flash {
        from {
          color: #FFFFFF;
        }

        to {
          color: #000C17;
        }
      }
    }
  }

  .offline-loader {
    width: 60%;
    max-width: 650px;

    .status-message {
      position: relative;
      top: -70px;
      /* fallback */
      top: -4.5vw;
      font-size: 3vw;
    }

    .error-message {
      position: relative;
      top: -2vw;
      font-size: 1.5vw;
      color: #B43131;
      white-space: nowrap;
      text-align: center;
    }
  }
}

.camera-video {
  text-align: center;

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.dashcam-player {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  color: white;

  video {
    max-width: 380px;
    max-height: 300px;

    @include small-screen {
      max-width: 300px;
      max-height: 200px;
    }
  }

  .controls {
    display: flex;
    justify-content: flex-end;

    z-index: 10;
    position: absolute;
    right: 0px;

    button {
      width: 27px;
      height: 27px;
      border: none;

      background-color: #000000;
      opacity: 0.6;
      color: #FFFFFF;

      img {
        width: 15px;
      }
    }

    button:hover {
      opacity: 0.9;
    }

    .close {
      font-size: 20px;
    }

    .syncup {
      padding-top: 0.5em;
    }
  }
}

.navigation-view {
  z-index: 20;
  position: relative;

  #map_canvas {
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.8);
  }

  .window-resize-control {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 30px;
    height: 30px;

    cursor: pointer;
  }
}

.notification-alert-center {
  z-index: 10;
  position: absolute;
  max-width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #B96E76;
  padding: 7px 10px;

  background-color: rgba(74, 5, 24, 0.5);

  .icon {
    position: relative;
    height: 20px;
    width: 20px;
    padding-right: 5px;

    @include small-screen {
      height: 15px;
      width: 15px;
    }
  }

  .text {
    position: relative;
    padding-left: 5px;
    color: rgb(185, 92, 118);

    line-height: 150%;
    font-size: 22px;
    word-wrap: break-word;
    white-space: pre-wrap;

    @include small-screen {
      font-size: 18px;
    }
  }

  animation: blinker 1.5s linear infinite alternate;
  animation-play-state: running;

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
}

.custom-react-tab {
  .react-tabs:not(:last-child) {
    border-bottom: 2px solid #000000;
  }

  .react-tabs__tab-list {
    display: table;
    width: 100%;
    margin: 0px;
    border-bottom: 1px solid #000000;
    padding: 0;
  }

  .react-tabs__tab {
    display: table-cell;

    position: relative;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 6px 12px;

    background: #1D2226;
    color: #999999;
    list-style: none;
    cursor: pointer;
    font-size: 18px;

    @include small-screen {
      font-size: 16px;
    }

    &--selected {
      background: #2A3238;
      color: #FFFFFF;
    }

    span {
      color: #FFFFFF;
    }
  }

  .react-tabs__tab-panel {
    display: none;

    &--selected {
      display: block;
    }
  }
}

.guide-text {
  .pane-text {
    color: #fff;
    font-size: 15px;
    text-indent: 30px;
    //padding:10px;
    margin-bottom: 20px;
    //display:block;
  }

  .pane-img {
    //width:200px;
    //height:100px;
    //display:flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    //padding:15px;
    max-width: 80%;
    max-height: 40%;
  }
}

.sensor-configuration-table {
  color: #fff;
  //margin:20px;
  .camera-message {
    margin-left: 22px;
    color: #D7466F;
  }

  .sensor-configuration-tr {
    color: #fff;
    //padding:10px;
    margin-left: 20px;
    margin-top: 10px;

    .main-sensor {
      color: red;
    }
  }

  .sensor-configuration-translation {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    .sensor-configuration-xyz {
      flex: 1;
      padding: 5px 15px 0 0;
      //padding-right:20px;
    }
  }

  input {
    color: #000;
  }
}

.preprocess-bar {
  clear: left;

  .preprocess-btn {
    min-width: 40px;
    margin-right: 5px;
    padding: 10px 10px; //原来是35
    border: 1px solid #383838;
    background: #1D2226;
    color: #FFFFFF;

    cursor: pointer;

    @include small-screen {
      min-width: 40px;
    }
  }

  .button-active {
    color: #30A5FF;
  }
}

.preprocess-console {
  z-index: 10;
  position: relative;
  min-width: 230px;
  margin: 0px;
  border: none;
  padding: 0px;

  overflow: hidden;

  .monitor-item {
    color: #fff;
    @include monitor-item-common-properties(calc(100% - 82px));
  }
}

.edit-tip {
  background-color: #1D2226;
}
